<template>
  <div>
    <div class="box1">
      <div id="t1" @click="tip">
        <img
          src="https://img.axureshop.com/26/5a/74/265a746da2364d2cb6895a934c11eec9/images/登录/u3559.png"
        />
        <p>微信</p>
      </div>
      <div id="t2" @click="tip">
        <img
          src="https://img.axureshop.com/26/5a/74/265a746da2364d2cb6895a934c11eec9/images/登录/u3562.png"
        />
        <p>QQ</p>
      </div>
      <div id="t3" @click="tip">
        <img
          src="https://img.axureshop.com/26/5a/74/265a746da2364d2cb6895a934c11eec9/images/登录/u3565.png"
        />
        <p>微博</p>
      </div>
    </div>
    <div class="box2">
      <span>在线阅读app V1.0.1</span>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  methods:{
    tip(){
      Toast('系统升级，敬请期待');
      // console.log("111");
    }
  }
};
</script>

<style lang="scss" scoped>
div {
  // overflow: hidden;
  .box1 {
    width: 300px;
    height: 80px;
    position: relative;
    top: 145px;
    left: 50px;
    #t1 {
      display: inline-block;
      margin-left: 10px;
      img {
        position: relative;
        left: 0px;
        top: 10px;
        bottom: 50px;
        width: 29px;
        height: 24px;
      }
      p {
        margin-top: 10px;
      }
    }
    #t2 {
      display: inline-block;
      margin-left: 80px;
      img {
        position: relative;
        left: 0px;
        top: 10px;
        bottom: 50px;
        width: 24px;
        height: 24px;
      }
      p {
        margin-top: 10px;
      }
    }
    #t3 {
      display: inline-block;
      margin-left: 80px;
      img {
        position: relative;
        left: 0px;
        top: 10px;
        bottom: 50px;
        width: 31px;
        height: 24px;
      }
      p {
        margin-top: 10px;
      }
    }
  }
  .box2 {
    clear: both;
    span {
      position: relative;
      top: 170px;
      left: 110px;
    }
  }
}
</style>
